<template>
  <div>
    <!-- 显示日期选择器按钮 -->
    <van-button @click="showCalendar">选择日期</van-button>

    <!-- 使用封装好的日期选择组件 -->
    <DatePicker
        v-model:show="showPicker"
    v-model:selectedDate="selectedDate"
    :minDate="minDate"
    :maxDate="maxDate"
    />

    <div>选择的日期: {{ selectedDate }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from './DatePicker.vue'; // 引入封装的日期选择器

// 控制日期选择器的显示/隐藏
const showPicker = ref(false);

// 存储选中的日期
const selectedDate = ref('');

// 获取今天日期并格式化为 YYYY-MM-DD
const today = new Date();
const minDate = new Date(today); // 最小日期为今天
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 1); // 最大日期为一个月后的日期

// 格式化日期为 YYYY-MM-DD 格式
const formatDate = (date) => {
  return date.toISOString().split('T')[0];
};

// 设置 min-date 和 max-date
const minDateFormatted = formatDate(minDate);
const maxDateFormatted = formatDate(maxDate);

// 打开日期选择器
const showCalendar = () => {
  showPicker.value = true;
};
</script>

<style scoped>
/* 可以根据需要自定义父组件的样式 */
</style>
